<template>
	<view>
		<view v-if="imglist.length>0" class="u-m-t-20 flex prc-li">
			<block v-if="type==1" v-for="(img,j) in imglist" :key="j">
				<u-image :showLoading="true" mode="aspectFill" @click.native.stop="objFormatArr(j)" style="margin-right: 1.3em;"
					radius="8rpx" :src="img" width="60" height="60">
					<view slot="loading">
						<u-loading-icon></u-loading-icon>
					</view>
				</u-image>
			</block>
			<block v-if="type==2" v-for="(img,j) in imglist" :key="j">
				<view class="spos flex  flex-direction">
					<u-image v-if="current==j&&isPreview==false" width="32rpx" height="32rpx" mode="widthFix"
						class="s-icon-top-right" :src="'/static/icon/qualified.png'"></u-image>
					<u-image :showLoading="true" mode="aspectFill" @click.native.stop="objFormatArr(j)"
						style="margin-right: .7em;" radius="8rpx" :src="img.photo" width="74" height="74">
						<view slot="loading">
							<u-loading-icon></u-loading-icon>
						</view>
					</u-image>
					<view class="u-m-t-10 text-black text-center" :class="current==j&&isPreview==false?'cur':''"
						style="width: 74px;font-size: 24rpx;">{{ 5 > img.dishesName.length ?str4(img.dishesName): str4(img.dishesName)+'...'}}
					</view>
				</view>
			</block>
		</view>
		<view v-else class="text-gray text-center">
			{{textTips}}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			imglist: {
				type: Array,
				default: () => {
					return []
				}
			},
			type: {
				type: Number,
				default: 1
			},
			isPreview: {
				type: Boolean,
				default: true,
			},
			textTips:{
				type: String,
				default: '暂无图片'
			}
		},
		data() {
			return {
				urllist: [],
				current: 0,
			}
		},
		methods: {
			// 预览图片单张
			previewImg(index) {
				uni.previewImage({
					current: index,
					urls: this.urllist
				});
			},
			//对象格式化数组
			objFormatArr(index) {
				this.current = index;
				this.urllist = [];
				if (this.isPreview) {
					if (this.type == 2) {
						this.imglist.map((item) => {
							this.urllist.push(item.photo);
						})
					} else {
						this.urllist = this.imglist;
					}
					this.previewImg(index);
				}else{
					this.$emit('chooseDishes', this.imglist[index]);
				}
			},
			str4(val) {
				if (val) return val.substr(0, 4)
				else return ''
			}
		}
	}
</script>

<style>
	.prc-li {
		overflow-x: auto;
	}

	.spos {
		position: relative;
	}

	.s-icon-top-right {
		position: absolute;
		right: 36rpx;
		top: 0;
		z-index: 99;
	}

	.cur {
		color: #41A0FF;
	}
</style>
